<template>
  <div class="coupon-page">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>优惠券管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <div>优惠卷管理</div>
      <div class="searchBox">
        <el-form ref="form" label-width="80px">
         <el-form-item label="优惠卷: ">
          <el-input v-model="searchName" placeholder="请输入优惠卷名称"></el-input>
          <el-button type="primary" size='small' class="search" @click="searchCoupon">搜素</el-button>
          <el-button type="warning" size='small' @click='czclick'>重置</el-button>
        </el-form-item>
        </el-form>
      </div>
        <button class="btn" @click="addCouponCard">新增优惠卷</button>
        <!-- 优惠卷管理区 -->
        <div  class="coupon-table">
          <el-table
      :data="couponList"
      style="width: 100%">
      <el-table-column
        prop="country.name"
        label="优惠卷名称"
        width="180">
      </el-table-column>
       <el-table-column
        prop="country.country_price"
        label="优惠卷金额/元"
        width="180">
      </el-table-column>
      <el-table-column
        prop="countryzj"
        label="使用金额限制">
      </el-table-column>
        <el-table-column
        prop="country_time"
        label="使用时限">
      </el-table-column>
        <el-table-column
        label="操作">
         <template slot-scope="scope">
                 <el-button size="mini" type="primary" icon="el-icon-edit" @click="editShow(scope.row)"></el-button>
                 <el-button size="mini" type="danger" icon="el-icon-delete" @click="clearForm(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
        </div>
        <!-- 分页器 -->
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="data.total">
    </el-pagination>
    <!-- 修改弹出框 -->
    <el-dialog
  title="修改优惠卷"
  :visible.sync="dialogVisible"
  width="50%"
  >
  <el-form ref="form" :model="editForm" label-width="110px" :rules="rules">
          <el-form-item label="优惠卷名字" prop="name">
                 <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="优惠卷金额" prop="country_price">
                 <el-input v-model="editForm.country_price" type="Number"></el-input>
        </el-form-item>
        <el-form-item label="使用金额限制" prop="countryzj">
                 <el-input v-model="editForm.countryzj"></el-input>
        </el-form-item>
        <el-form-item label="使用时限" prop="country_time">
                 <el-input v-model="editForm.country_time" type="Number"></el-input>
        </el-form-item>
      </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="close">取 消</el-button>
    <el-button type="primary" @click="editSure">确 定</el-button>
  </span>
  </el-dialog>
  <!-- 弹出添加优惠卷  @close='addFormCancel'-->
  <el-dialog
  title="添加优惠卷"
  :visible.sync="addCoupon"
  width="50%"
   @close='addFormCancel'
  >
  <el-form ref="addForm" :model="addForm" label-width="110px" :rules="rules">
          <el-form-item label="优惠卷名字" :prop="$refs.addForm ? 'country.name' : 'name'">
                 <el-input v-model="addForm.country.name"></el-input>
        </el-form-item>
        <el-form-item label="优惠卷金额" :prop="$refs.addForm ? 'country.country_price' : 'name'">
                 <el-input v-model="addForm.country.country_price" type="Number"></el-input>
        </el-form-item>
        <el-form-item label="使用金额限制" prop="countryzj">
                 <el-input v-model="addForm.countryzj"></el-input>
        </el-form-item>
        <el-form-item label="使用时限" prop="country_time">
                 <el-input v-model="addForm.country_time" type="Number"></el-input>
        </el-form-item>
      </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取消</el-button>
    <el-button type="primary" @click="onConfirm">提交</el-button>
  </span>
</el-dialog>
    </el-card>
  </div>
</template>

<script>
import '@/mock/zytmock.js'
import { setItem, getItem } from './utils/stroge'
export default {
  name: 'Preferential',
  components: {
  },
  props: {},
  data () {
    return {
      searchName: '',
      couponList: [],
      pagenum: 1,
      pagesize: 5,
      data: {},
      dialogVisible: false,
       editForm: {
            name: '',
            country_price: '',
            countryzj: '',
            country_time: ''
        },
         rules: {
             name:{ required: true, message: '请输入优惠卷名字', trigger: 'blur'},
             country_price:{ required: true, message: '请输入优惠卷金额', trigger: 'blur'},
             countryzj:{ required: true, message: '请输入使用金额限制', trigger: 'blur'},
             country_time:{ required: true, message: '请输入使用时限', trigger: 'blur'}
        },
        couponId: 0,
        query: '',
        addCoupon: false,
        addForm: {
            country: {
              name: '',
              country_price: ''
              }, 
            coupon_id: 31,  
            countryzj: '',
            country_time: ''
        },
        content: ''
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getcoupon()
  },
  mounted () {
  },
  methods: {
    async getcoupon () {
      const data = await this.axios.get('/coupon', {
        params: {
          query: this.query,
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      })
      setItem('coupon', data)
      this.couponList = getItem('coupon').data.params
      this.data = data.data
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.getcoupon()
    },
    handleCurrentChange (val) {
      this.pagenum = val
      this.getcoupon()
    },
    editShow (row) {
       this.editForm.name = row.country.name
      this.editForm.country_price = row.country.country_price
      this.editForm.countryzj = row.countryzj
      this.editForm.country_time = row.country_time
      this.couponId = row.coupon_id
      this.dialogVisible = true
    },
    close () {
      this.$message('取消了编辑')
      this.dialogVisible = false
    },
    editSure () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        /* 修改数据 */
        try {
          const arr = this.couponList.filter(item => {   
            return item.coupon_id === this.couponId
          })
          arr[0].country.name = this.editForm.name
          arr[0].country.country_price = this.editForm.country_price
          arr[0].countryzj = this.editForm.countryzj
          arr[0].country_time = this.editForm.country_time
          this.$message.success('修改成功')
        } catch (error) {
          this.$message('修改失败')
        }
        this.dialogVisible = false
      })   
    },
    async clearForm (row) {
       const result = await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)     
        if (result !== 'confirm') {
          return this.$message('取消了删除')
        }
        await this.axios.delete('/del')
        this.getcoupon()
    },
    async searchCoupon () {
      this.query = this.searchName
       const data = await this.axios.get('/coupon', {
        params: {
          query: this.query,
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      })
      this.couponList = data.data.params
      this.data = data.data
    },
    czclick () {
      this.query = ''
      this.searchName = ''
      this.getcoupon()
    },
    addCouponCard () {
      this.addCoupon = true
    },
    cancel () {
      this.addCoupon = false
      this.$message('取消了添加')
       /* this.$refs.addForm.resetFields() */
    },
    onConfirm () {
      this.$refs.addForm.validate(async valid => {
        if (!valid) {
          return this.$message('填写有误')
        }
        /* 修改数据 */
        try {
         const { data } = await this.axios.post('/add', {
            pagenum: this.pagenum,
            pagesize: this.pagesize,
            content: this.addForm
          })
          setItem('coupon', data)
          this.couponList = getItem('coupon').params
          this.data = data
           this.$message.success('添加成功')
        } catch (error) {
          this.$message('添加失败')
        }
        this.addCoupon = false
      })
    },
    addFormCancel () {
          this.$refs.addForm.resetFields()
      }
    }
  }
</script>

<style scoped lang="less">
.coupon-page{
 .searchBox{
   height: 50px;
   display: flex;
   align-content: center;
   margin-top: 10px;
   border: 1px solid gray;
   border-radius: 5px;
    margin-bottom: 10px;
    .el-form{
      height: 100%;
    .el-form-item{
      margin-top: 5px;
      .search{
      margin-left: 100px;
      margin-right: 5px;
    }
    .el-input{
  width: 200px;
  height: 30px;
  /deep/.el-input__inner{
    height: 100%;
  }
    }
    }
  }
 }
  .btn{
   width: 100px;
   height: 20px;
   text-align: center;
   line-height: 20px;
     font-size: 13px;
   background-color: rgb(22, 155, 213);
   border: none;
   border-radius: 5px;
   outline: none
 }
}
</style>
